<template>
  <div class="home w">
    <div class="banner">
      <img class="banner-img" src="@/assets/imgs/u2.jpg" alt />
      <div class="banner-title">
        <div class="title">设计助力呈现</div>
        <div class="cont">
          不断突破寻找我们、客户、观众之间的情感连接，
          构造人、品牌、空间的最优呈现。
        </div>
      </div>
    </div>
    <HomEintroduce></HomEintroduce>
    <HomeImgList></HomeImgList>
    <HomeCooperation></HomeCooperation>
    <div class="sw-box">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide class="sw-slide pointer">
          <img class="w" src="@/assets/imgs/u60.jpg" alt />
        </swiper-slide>
        <swiper-slide class="sw-slide pointer">
          <img class="w" src="@/assets/imgs/u61.jpg" alt />
        </swiper-slide>
        <swiper-slide class="sw-slide pointer">
          <img class="w" src="@/assets/imgs/u62.jpg" alt />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="sw-title">
        <div class="title">精选项目</div>
        <div class="cont">迄今为止最精彩的体验</div>
        <div class="btn pointer">ALBABA MUSEUM</div>
      </div>
    </div>
    <HomeLiaison></HomeLiaison>
    <HomeHz></HomeHz>
  </div>
</template>

<script>
import HomEintroduce from './components/HomEintroduce'
import HomeImgList from './components/HomeImgList'
import HomeCooperation from './components/HomeCooperation'
import HomeLiaison from './components/HomeLiaison'
import HomeHz from './components/HomeHz'
export default {
  name: 'Home',
  components: {
    HomEintroduce,
    HomeImgList,
    HomeCooperation,
    HomeLiaison,
    HomeHz
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }
        // Some Swiper option/callback...
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/base.scss';
.home {
  .sw-box {
    position: relative;
    text-align: center;
    .sw-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      z-index: 999999999999999;
      .title {
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 8px;
      }
      .cont {
        font-size: 16px;
        margin-bottom: 60px;
      }
      .btn {
        width: 160px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(255, 255, 255, 1);
        border-radius: 5px;
        font-size: 13px;
        line-height: 40px;
        &:hover {
          color: $base-color;
          background-color: #fff;
        }
      }
    }
  }
  .banner {
    position: relative;
    text-align: center;
    margin-bottom: 100px;
    .banner-img {
      width: 100%;
    }
    .banner-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .title {
        font-size: 70px;
        color: #fff;
      }
      .cont {
        font-size: 20px;
        color: #fff;
      }
    }
  }
}
</style>
